<template>
  <div class="sip-batch-manage">
    <div class="prompt">温馨提示：查询结果中只包含未停用的普通工号座席，普通工号座席停用时，该座席的附属工号也将同步停用</div>
    <div class="margin-t-15">
      <div>起止工号／座席名称</div>
      <div class="margin-t-7">
        <el-select v-model="search.type" placeholder="请选择" style="width: 100px; float: left;margin-right: 10px">
          <el-option label="起止工号" value="exten"></el-option>
          <el-option label="座席名称" value="name"></el-option>
        </el-select>
        <div v-if="search.type === 'exten'">
          <el-input style="width: 90px" v-model="search.beginExten" placeholder="请输入开始工号"></el-input> — <el-input style="width: 90px" v-model="search.endExten" placeholder="请输入结束工号"></el-input>
        </div>
        <div v-if="search.type === 'name'">
          <el-input style="width: 200px" v-model="search.combox" placeholder="请输入座席名称"></el-input>
        </div>
      </div>
    </div>
    <div class="margin-t-15">
      <div>使用版本：</div>
      <div class="margin-t-7">
        <el-select v-model="search.version" placeholder="请选择">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="item in licenceType"
            :key="item.code_value"
            :label="item.code_name"
            :value="item.code_value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="margin-t-15 search-btn"><el-button type="primary" @click.stop="searchAgents" class='primary_btn'>查询</el-button></div>
    <div class="margin-t-15">
      <div>
        <el-checkbox v-model="checkedAll" @change="checkAllAgents">全部</el-checkbox> <span style="margin-left: 20px">共{{listData.length}}位座席，已选择<span class="main-color">{{num}}</span>位座席</span>
      </div>
      <div class="margin-t-15">
        <el-checkbox-group v-model="checkList" @change="checkAgent">
          <div style="width: 130px; float: left;margin-left: 20px" v-for="item in listData">
            <el-checkbox :label="item._id">
              <div style="float: left;max-width: 50px;overflow: hidden;text-overflow: ellipsis;">{{item.displayName}}</div><div>[{{item.exten}}]</div>
            </el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'agentBatchDisable',
    data () {
      return {
        checkedAll: false, // 是否全选
        count: 0, // 查询的列表总数
        num: 0, // 已选的座席数
        listData: [], // 查询的列表数据
        checkList: [], // 选中的座席
        search: {
          type: 'exten', // 是起止工号还是座席名称
          version: '', // 查询的座席版本
          beginExten: '', // 开始工号
          endExten: '', // 结束工号
          combox: '' // 座席名称
        }
      }
    },
    props: {
      licenceType: Array
    },
    computed: {
      pbx () {
        return this.$store.state.config.callCenter.currentPBX
      }
    },
    methods: {
      resetFormData () {
        this.checkedAll = false
        this.count = 0
        this.num = 0
        this.listData = []
        this.checkList = []
        this.search = {
          type: 'exten', // 是起止工号还是座席名称
          version: '', // 查询的座席版本
          beginExten: '', // 开始工号
          endExten: '', // 结束工号
          combox: '' // 座席名称
        }
      },
      stopAgents () {
        let ids = ''
        if (this.checkList.length === 0) {
          this.$message.error(this.$t('report.pleChoseAgent'))
          return
        } else {
          ids = this.checkList.toString()
        }
        let data = {
          account: this.$store.state.session.account.account,
          pbx: this.pbx,
          exten_ids: ids
        }
        console.log(data)
        this.$confirm('确定要停用吗？', this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('batchDisableAgent', data).then((res) => {
            if (res.success) {
              this.$message.success('批量停用座席成功！')
              this.$emit('batchDisableSuccess')
            }
          })
        })
      },
      // 单选择某一个座席
      checkAgent () {
        this.num = this.checkList.length
      },
      // 全选
      checkAllAgents (value) {
        console.log(value)
        this.checkList = []
        if (value) {
          for (let i = 0; i < this.listData.length; i++) {
            this.checkList.push(this.listData[i]._id)
          }
        }
        this.num = this.checkList.length
      },
      // 查询座席
      searchAgents () {
        let data = {
          pbx: this.pbx,
          version: this.search.version
        }
        if (this.search.type === 'exten') {
          data.beginExten = this.search.beginExten
          data.endExten = this.search.endExten
        } else {
          data.combox = this.search.combox
        }
        this.$store.dispatch('retrieveUsers', data).then(resp => {
          if (resp && resp.success) {
            this.listData = []
            if (resp.list.length !== 0) {
              for (let i = 0; i < resp.list.length; i++) {
                let _obj = resp.list[i]
                this.listData.push(_obj)
              }
            }
          }
        })
      }
    },
    beforeMount () {
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .search-btn
    text-align: right
    margin-top: 10px
    padding-bottom: 20px
    border-bottom: 1px dashed #ccc
  .main-color
    color $c-main
  .pink
    color $c-pink
  .primary_btn
    margin-left 10px
  .prompt
    color $c-prompt
  .margin-t-7
    margin-top 5px
  .margin-t-15
    margin-top 15px
</style>
